<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>板块数据统计</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .container {
            margin-top: 20px;
        }
        .header {
            background-color: #007bff;
            color: white;
            padding: 15px;
            border-radius: 5px 5px 0 0;
            margin-bottom: 0;
        }
        .card {
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .card-body {
            padding: 20px;
        }
        .stat-card {
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            color: white;
            margin-bottom: 20px;
            transition: transform 0.3s;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .stat-card.total {
            background-color: #007bff;
        }
        .stat-card.increase {
            background-color: #28a745;
        }
        .stat-card.decrease {
            background-color: #dc3545;
        }
        .stat-card.stable {
            background-color: #6c757d;
        }
        .stat-value {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
        .btn-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
        }
        .btn-secondary:hover {
            background-color: #545b62;
            border-color: #4e555b;
        }
        .chart-container {
            position: relative;
            height: 400px;
            margin-top: 20px;
        }
        .update-info {
            font-size: 12px;
            color: #6c757d;
            text-align: right;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="header">
                <div class="row">
                    <div class="col-md-8">
                        <h3 class="mb-0">板块数据统计</h3>
                    </div>
                    <div class="col-md-4 text-right">
                        <a href="/block/list" class="btn btn-outline-light btn-sm">
                            <i class="fas fa-list"></i> 返回列表
                        </a>
                        <button id="refreshStatsBtn" class="btn btn-outline-light btn-sm ml-2">
                            <i class="fas fa-sync-alt"></i> 刷新统计
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!-- 统计卡片 -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="stat-card total">
                            <div class="stat-value" id="totalCount">${totalCount}</div>
                            <div class="stat-label">板块总数</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card increase">
                            <div class="stat-value" id="increaseCount">0</div>
                            <div class="stat-label">上涨板块</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card decrease">
                            <div class="stat-value" id="decreaseCount">0</div>
                            <div class="stat-label">下跌板块</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card stable">
                            <div class="stat-value" id="stableCount">0</div>
                            <div class="stat-label">平盘板块</div>
                        </div>
                    </div>
                </div>

                <!-- 涨跌分布图表 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">板块涨跌幅分布</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="percentChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 成交额前10板块 -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h5 class="mb-0">成交额前10板块</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="amountChart"></canvas>
                        </div>
                    </div>
                </div>

                <div class="update-info">
                    最后更新时间：<span id="lastUpdateTime">--</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 加载统计数据
            loadStatistics();
            
            // 刷新按钮点击事件
            $('#refreshStatsBtn').click(function() {
                $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> 刷新中...');
                loadStatistics();
                setTimeout(() => {
                    $(this).prop('disabled', false).html('<i class="fas fa-sync-alt"></i> 刷新统计');
                }, 1000);
            });
        });
        
        // 加载统计数据
        function loadStatistics() {
            $.ajax({
                url: '/block/dataList',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    calculateStatistics(data);
                    createPercentChart(data);
                    createAmountChart(data);
                    updateLastTime(data);
                },
                error: function() {
                    alert('加载统计数据失败');
                }
            });
        }
        
        // 计算统计信息
        function calculateStatistics(data) {
            let increaseCount = 0;
            let decreaseCount = 0;
            let stableCount = 0;
            
            $.each(data, function(index, block) {
                if (block.changePercent > 0) {
                    increaseCount++;
                } else if (block.changePercent < 0) {
                    decreaseCount++;
                } else {
                    stableCount++;
                }
            });
            
            $('#totalCount').text(data.length);
            $('#increaseCount').text(increaseCount);
            $('#decreaseCount').text(decreaseCount);
            $('#stableCount').text(stableCount);
        }
        
        // 创建涨跌幅分布图表
        function createPercentChart(data) {
            // 按涨跌幅分组
            let percentRanges = {
                '-5到-4': 0,
                '-4到-3': 0,
                '-3到-2': 0,
                '-2到-1': 0,
                '-1到0': 0,
                '0到1': 0,
                '1到2': 0,
                '2到3': 0,
                '3到4': 0,
                '4到5': 0,
                '5以上': 0
            };
            
            $.each(data, function(index, block) {
                let percent = block.changePercent;
                if (percent < -5) {
                    percentRanges['-5到-4']++;
                } else if (percent < -4) {
                    percentRanges['-4到-3']++;
                } else if (percent < -3) {
                    percentRanges['-3到-2']++;
                } else if (percent < -2) {
                    percentRanges['-2到-1']++;
                } else if (percent < 0) {
                    percentRanges['-1到0']++;
                } else if (percent <= 1) {
                    percentRanges['0到1']++;
                } else if (percent <= 2) {
                    percentRanges['1到2']++;
                } else if (percent <= 3) {
                    percentRanges['2到3']++;
                } else if (percent <= 4) {
                    percentRanges['3到4']++;
                } else if (percent <= 5) {
                    percentRanges['4到5']++;
                } else {
                    percentRanges['5以上']++;
                }
            });
            
            let ctx = document.getElementById('percentChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: Object.keys(percentRanges),
                    datasets: [{
                        label: '板块数量',
                        data: Object.values(percentRanges),
                        backgroundColor: [
                            '#dc3545', '#dc3545', '#dc3545', '#dc3545', '#dc3545',
                            '#6c757d',
                            '#28a745', '#28a745', '#28a745', '#28a745', '#28a745'
                        ],
                        borderColor: [
                            '#dc3545', '#dc3545', '#dc3545', '#dc3545', '#dc3545',
                            '#6c757d',
                            '#28a745', '#28a745', '#28a745', '#28a745', '#28a745'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    }
                }
            });
        }
        
        // 创建成交额前10图表
        function createAmountChart(data) {
            // 按成交额降序排序，取前10
            let sortedData = [...data].sort((a, b) => b.amount - a.amount).slice(0, 10);
            
            let ctx = document.getElementById('amountChart').getContext('2d');
            new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    labels: sortedData.map(block => block.name),
                    datasets: [{
                        label: '成交额(亿元)',
                        data: sortedData.map(block => (block.amount / 100000000).toFixed(2)),
                        backgroundColor: 'rgba(0, 123, 255, 0.7)',
                        borderColor: 'rgba(0, 123, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
        
        // 更新最后更新时间
        function updateLastTime(data) {
            if (data && data.length > 0) {
                // 找到最新的更新时间
                let maxUpdateTime = data.reduce((max, block) => {
                    return block.updateTime > max ? block.updateTime : max;
                }, data[0].updateTime);
                
                let date = new Date(maxUpdateTime);
                let formattedTime = date.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                });
                
                $('#lastUpdateTime').text(formattedTime);
            }
        }
    </script>
</body>
</html>